<template>
	<view style="padding: 20px;">
		<view style="display: flex; flex-wrap: wrap;">
			<view style="width: 50%; padding: 10px;margin-top: 0rpx;" v-for="(item, index) in craftData" :key="index">
				<view style="width: 100%; border-radius: 5rpx; height: 300rpx; margin-bottom: 10rpx;text-align: center;
					" @click="gotoPage('/pages/index/device', item)">
					<view style="width: 100%;display: flex;justify-content: center;">
						<image :src="'http://211.103.114.94:2081/camera/IoReadImageByPath?path='+item.picUrl"
							style="width: 250rpx; height: 250rpx;"></image>
							<!-- <image :src="item.picUrl"
								style="width: 220rpx;height: 220rpx;margin-top: 15rpx;"></image> -->
					</view>
					<view style="width: 100%; display: flex;justify-content: center;margin: 10rpx 0rpx;">
						<view
							style="font-weight: 700; font-size: 20rpx;width: 250rpx;background-color: #fff;margin-top: 10rpx;border-radius: 5rpx;padding: 10rpx 0rpx;">
							{{item.craftName}}
						</view>

					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryCraftName,getImage
	} from "@/api/index"
	export default {
		data() {
			return {
				form: {},
				craftData: []
			}
		},
		onReady() {
			this.getServerData1();
		},
		methods: {
			getServerData1() {
				uni.showLoading({
					title: '加载中'
				});
				queryCraftName(this.form).then(response => {
					// 使用示例
					console.info('aaa1aa', response)
					this.craftData = response;
					 this.craftData.forEach((item) => {
					// console.info('aa5aaa', item)
					  // this.getIamge(item.picUrl, item); // 调用getIamge方法，并将item作为参数传递
					 });
					console.info('aaa2aa', this.craftData)
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
				})

			},
			getIamge(path,item){
				let f ={};
				f.path = path;
				getImage(f).then(response => {
					// 使用示例
					console.info('aaaaaaa',response)
					
					 // 将获取到的文件流转换为base64格式
					 var base64 = uni.arrayBufferToBase64(response.data);
					 // 将base64格式的文件展示为图片
					 // 假设imgElement是用于展示图片的img标签
					item.picUrl = 'data:image/png;base64,' + base64; // 假设文件类型为png，根据实际情况修改
					console.info("---------",item)
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
				})
				
			},
			gotoPage(url, item) {
				console.log("--------", JSON.stringify(item))

				console.log("--------", url)
				uni.navigateTo({
					url: url + '?item=' + JSON.stringify(item)
				})
			},
		}
	}
</script>

<style>

</style>